<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>优化样式2</title>
    <style>
    * {
        box-sizing: border-box;
    }

    body {
        padding: 50px;
    }

    input {
        padding: 0;
        margin: 0;
        border: 0;
    }

    .fruit:before {
        content: "";
        display: table;
    }

    .fruit:after {
        content: "";
        display: table;
        clear: both;
    }

    .fruit>div {
        position: relative;
        float: left;
        margin-right: 50px;
        width: 80px;
        height: 40px;
        line-height: 40px;
    }

    .fruit>div:last-child {
        margin-right: 0;
    }

    .fruit label {
        display: block;
        width: 50px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
    }

    .fruit input {
        z-index: 3;
        display: block;
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50px;
        margin: auto;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }

    .fruit .user-defined {
        z-index: 2;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50px;
        margin: auto;
        width: 30px;
        height: 30px;
        border: 1px solid #000;
        border-radius: 50%;
        cursor: pointer;
    }

    .fruit .user-defined span.circle {
        display: block;
        width: 24px;
        height: 24px;
        margin-top: 2px;
        margin-left: 2px;
        background-color: transparent;
        border-radius: 50%;
    }

    .fruit .user-defined span.active {
        background-color: #000;
    }
    </style>
</head>

<body>
    <form action="">
        <div class="fruit">
            <div class="apple">
                <label for="apple">苹果</label>
                <input type="radio" name="fruit" id="apple">
                <div class="user-defined">
                    <span class="circle"></span>
                </div>
            </div>
            <div class="banana">
                <label for="banana">香蕉</label>
                <input type="radio" name="fruit" id="banana">
                <div class="user-defined">
                    <span class="circle"></span>
                </div>
            </div>
            <div class="orange">
                <label for="orange">橘子</label>
                <input type="radio" name="fruit" id="orange">
                <div class="user-defined">
                    <span class="circle"></span>
                </div>
            </div>
        </div>
    </form>
    <script src="../js/jquery-2.1.0.min.js"></script>
    <script>
    $(function() {
        $("input").click(function() {
            $(this).siblings("div").children("span").addClass("active");
            $(this).parents("div").siblings("div").find("span").removeClass("active");
        });
    })
    </script>
</body>

</html>